<template>
  <div
    class="w-full bg-white p-4 flex gap-4 relative border-b border-gray-100 animate-pulse"
  >
    <!-- 头像骨架 -->
    <div class="w-12 h-12 rounded-full bg-gray-200 flex-shrink-0"></div>

    <!-- 内容区骨架 -->
    <div class="flex-1 flex flex-col justify-between min-w-0">
      <!-- 用户名和标题骨架 -->
      <div class="flex flex-col gap-2">
        <div class="w-20 h-4 bg-gray-200 rounded"></div>
        <div class="w-3/4 h-5 bg-gray-200 rounded"></div>
        <div class="w-2/3 h-4 bg-gray-200 rounded"></div>
      </div>

      <!-- 互动按钮骨架 -->
      <div class="flex items-center gap-6 mt-3">
        <div class="w-12 h-4 bg-gray-200 rounded"></div>
        <div class="w-12 h-4 bg-gray-200 rounded"></div>
        <div class="w-12 h-4 bg-gray-200 rounded"></div>
      </div>
    </div>
  </div>
</template>
